<template>
    <div class="header">
        <el-row :gutter="20">
            <el-col :span="5">
                <div class="logo c-def" style="-webkit-app-region: drag">
                    <img src="../../../static/img/logo.png" alt="">
                    易店长
                </div>
            </el-col>
            <el-col :span="10">
                <el-col :span="6" class="munu-item-l">
                    <div @click="routeGo('/welcome','首页')" class="c-def">
                        <i class="fa  fa-home pad-r fa-style" style="font-size: 22px;width: 20px;"
                           aria-hidden="true"></i>
                        <span>首页</span>
                    </div>
                </el-col>
                <el-col :span="6" class="munu-item-l">
                    <div @click="routeGo('/cashierBill','收银')" class="c-def">
                        <i class="fa fa-jpy pad-r fa-style" style="width: 14px" aria-hidden="true"></i>
                        <span>收银</span>
                    </div>
                </el-col>
                <el-col :span="6" class="munu-item-l">
                    <div @click="routeGo('/memberInfo','开卡')" class="c-def">
                        <i class="fa fa-credit-card-alt pad-r fa-style" aria-hidden="true"></i>
                        <span>开卡</span>
                    </div>
                </el-col>
                <el-col :span="6" class="munu-item-l border-r">
                    <div @click="routeGo('/deposit','充值')" class="c-def">
                        <i class="fa fa-money pad-r fa-style" style="font-size: 23px" aria-hidden="true"></i>
                        <span>充值</span>
                    </div>
                </el-col>
            </el-col>
            <el-col :span="9" class="menu-item-r">
                <el-col :span="17">
                    <div class="tr">
                        <i class="fa fa-user-o c-def"></i>
                        <el-dropdown>
                            <span class="pad-r my-shop c-def" aria-hidden="true" >{{username}}<i
                                    class="fa fa-caret-down c-def" style="padding-left: 0.5em;"></i></span>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <div @click="routeGo('/changePwd','修改密码')" style="cursor: pointer;">
                                        <span class="c-def">修改密码</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <div @click="routeGo('/myshop','店铺设置')">
                                        <span class="c-def">修改店铺信息</span>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <div @click="backLogin">
                                        <span class="c-def">退出当前帐号</span>
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div><i class="icon-minisize c-def" aria-hidden="true" @click="minWin" style="font-size: 18px"></i>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div v-if="this.$store.state.minSize"><i class="icon-Zoom-box c-def" aria-hidden="true"
                                                             @click="maxWin"></i></div>
                    <div v-if="!this.$store.state.minSize"><i class="icon-restore c-def" aria-hidden="true"
                                                              @click="restoreWin"></i></div>
                </el-col>
                <el-col :span="2">
                    <i class="icon-close c-def" aria-hidden="true" @click="closeWin"></i>
                </el-col>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import Vue from 'vue';
    import VueBlu from 'vue-blu';
    import 'vue-blu/dist/css/vue-blu.min.css';
    import '../../../static/css/custom/style.css';
    import * as type from '../../store/types';
    let ipc;
    try {
        ipc = window.require('electron').ipcRenderer;
    } catch (e) {

    }
    Vue.use(VueBlu);
    var myData = [
        {
            'id': '12',
            'menuName': '首页',
            'menuCode': '111',
            'index': 'analysis'
        },
        {
            'id': '13',
            'menuName': '收银 ',
            'menuCode': '50',
            'index': 'cashierProcess'
        },
        {
            'id': '14',
            'menuName': '开卡',
            'menuCode': '30',
            'index': 'memberInfo'

        },
        {
            'id': '15',
            'menuName': '充值',
            'menuCode': 'deposit',

        },
        {
            'id': '16',
            'menuName': '米雪的店铺',
            'menuCode': '',
            'index': 'myshop',

        }
    ];


    export default {
        name: 'treeMenu',
        props: {
            goClick: {
                type: Function
            },
            currentName:''
        },
        data() {
            return {
                account: '我的店铺',
                theModel: myData,
                name: '',

            }
        },
        created: function () {
//            this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
//            console.log(this.currentUser)
//            this.name = this.currentUser.name;
            let username = this.$store.state.username;
            this.name = username;
        },

        watch:{
//            username(){}
        },
        computed: {
            username(){
                let username = this.$store.state.username;
                this.name = username;
                return username;
            }
        },
        methods: {
//            getCurrentShop: function (organId) {
//                this.loading = true;
//                let self = this;
//                this.$axioxs.get("/organ/" + organId)
//                    .then(function (res) {
//                        console.log(JSON.stringify(res.data));
//                        self.account = res.data.name;
//                        console.log(self.form);
//                        self.loading = false;
//
//                    })
//                    .catch(function (error) {
//                        self.$message({
//                            showClose: true,
//                            type: 'error',
//                            message: error,
//                            onClose: function () {
//                                self.loading = false;
//                            }
//                        });
//                    });
//            },
            handleCommand(command) {
                if (command == 'loginout') {
                    localStorage.removeItem('ms_username')
                    this.$router.push('/login');
                }
            },
            routeGo: function (toRout, title) {
                if (toRout == undefined) {
                    console.log("并没有配置路由")
                } else {//路由到指定页面
//                    console.log(111);

                    this.$store.commit(type.TITLES_ADD, {title: title, index: toRout});

                    //判断是否已经打开
                    let titles = this.$store.state.titles;
                    console.log(titles);
                    for (let i = 0; i < titles.length; i++) {
                        let _title = titles[i].title;
                        if (_title == title) {//如果有已经打开的就激活当前标签页面
                            this.$store.commit(type.TITLES_ACTIVITY, i);
                            this.$store.commit(type.CHANGE_INDEX, toRout);
                            break;
                        }
                    }
                    this.$router.replace({
                        path: toRout,
                        query: {redirect: this.$router.currentRoute.fullPath}
                    });

                }
            },
            makeNewOne(){
                this.$store.commit(type.CHANGE_INDEX, '/memberInfo');
                this.$router.push({
                    name: 'memberA',
                    path: '/memberInfo',
                    params: {new: 'new'}
                });
            },
            backLogin: function () {
                this.$router.push({
                    name: '',
                    path: '/login',
                });
            },
            minWin: function () {
                ipc.send('hide-window');
//                var win = nw.Window.get();
//                win.minimize();
                return;
            },
            maxWin: function () {
                ipc.send('show-window');
                this.$store.commit(type.WIN_SIZE, true);
//                var win = nw.Window.get();
//                win.maximize();
                return;

            },
            restoreWin: function () {
                this.$store.commit(type.WIN_SIZE, false);
                ipc.send('orignal-window');
//                var win = nw.Window.get();
//                win.restore();
                return;
            },
            closeWin: function () {
                ipc.send('window-all-closed');
                return;
            }

        }
    }
</script>
<style>
    /*@import "../../common/fonts/";*/
    .header {
        height: 50px;
        font-size: 22px;
        line-height: 50px;
        font-weight: bold;
        color: #fff;
        background: #cc000b;
        text-align: center;
    }

    .logo {
        text-align: left;
        padding-left: 20px;
    }

    .tr {
        text-align: right;
    }

    .logo img {
        vertical-align: middle;
        padding: 6px 0;
    }

    .user-info {
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #fff;
    }

    .user-info .el-dropdown-link {
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
    }

    .user-info .user-logo {
        position: absolute;
        left: 0;
        top: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .el-dropdown-menu__item {
        text-align: center;
    }

    .munu-item-l {
        font-size: 18px;
        font-weight: bold;
        border-left: 1px solid rgba(51, 51, 51, 0.3);
    }

    .border-r {
        border-right: 1px solid rgba(51, 51, 51, 0.3);
    }

    .menu-item-r {
        float: right;
        font-size: 16px;
        font-weight: bold;
    }

    .menu-item-r ul li {
        float: left;
        padding: 0 20px;
    }

    .my-shop {
        padding-right: 4px;
        line-height: inherit;
        color: #fff;
        cursor: pointer;
    }

    .fa-caret-down {
        color: #fff;
    }

    .fa-style {
        line-height: inherit;
        color: #fff;
    }

    .icon-size {
        font-size: 20px;
    }

    .fs-23 {
        font-size: 23px;
    }

    .shop-name-length {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 7em;
    }

    .c-def {
        cursor: default;
    }
</style>
